<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <processes></processes>
        <div>
          <title-card title="依赖下载"></title-card>
          <pre-code :code="npm" language="bash" />

          <title-card title="依赖引入"></title-card>
          <p>
            &nbsp;&nbsp;Vue3与Vue2不同，直接引入会报错，我在配置文件进行了修改
          </p>
          <pre-code :code="join" language="JavaScript" />=

          <title-card title="antv-x6初始化"></title-card>
          <pre-code :code="init" language="JavaScript" />

          <title-card title="设置快捷键"></title-card>
          <p>
            &nbsp;&nbsp;此代码可写在初次化方法中
          </p>
          <pre-code :code="bindKey" language="JavaScript" />

          <title-card title="数据初始化"></title-card>
          <pre-code :code="info" language="JavaScript" />

          <title-card title="生成JSON数据"></title-card>
          <pre-code :code="submit" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="AntvX6">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from "@/components/TitleCard/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';
import processes from "./processes/index.vue"
const npm = ref(`npm install @antv/x6 --save
npm install @antv/x6-vue-shape
`)
const join = ref(`import "@antv/x6-vue-shape";
import { Graph, Shape, FunctionExt } from "@antv/x6";

// vite.config.ts
resolve: {
  alias: {
    ...
    '@antv/x6': '@antv/x6/dist/x6.js',
    '@antv/x6-vue-shape': '@antv/x6-vue-shape/lib'
  }
},
`)
const init = ref(`
// 初始化流程图画布
const initX6 = () => {
  graph = new Graph({
    container: document.getElementById('containerChart'),
    width: app.value.offsetWidth-180,
    height: 768,
    grid: grid.value,
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: 'ctrl',
      minScale: 0.5,
      maxScale: 3,
    },
    panning: {
      enabled: true,
      modifiers: 'shift',
    },
    connecting: {
      router: {
        name: 'manhattan',
        args: {
          padding: 1,
        },
      },
      connector: {
        name: 'rounded',
        args: {
          radius: 8,
        },
      },
      anchor: 'center',
      connectionPoint: 'anchor',
      allowBlank: false,
      snap: {
        radius: 20,
      },
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#A2B1C3',
              strokeWidth: 2,
              targetMarker: {
                name: 'block',
                width: 12,
                height: 8,
              },
            },
          },
          zIndex: 0,
        });
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet;
      },
    },
    highlighting: {
      magnetAdsorbed: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#5F95FF',
            stroke: '#5F95FF',
          },
        },
      },
    },
    resizing: true,
    rotating: true,
    selecting: {
      enabled: true,
      rubberband: true,
      showNodeSelectionBox: true,
    },
    snapline: true,
    keyboard: true,
    clipboard: true,
    history: true,
  });
};`)
const bindKey = ref(`//delete
graph.bindKey('delete', () => {
  const cells = graph.getSelectedCells();
  if (cells.length) {
    graph.removeCells(cells);
  }
});
// 回退
graph.bindKey('ctrl+z', () => {
  graph.history.undo();
});
// 前进
graph.bindKey('ctrl+Y', () => {
  graph.history.redo();
});
// 鼠标移入移出节点
graph.on(
  'node:mouseenter',
  FunctionExt.debounce(() => {
    const container = document.getElementById('containerChart');
    const ports = container.querySelectorAll('.x6-port-body');
    showPorts(ports, true);
  }),
  500,
);
// 双击弹窗
graph.on('cell:dblclick', ({ e, x, y, cell, view }) => {
  curCell = cell;
  showComponent();
});
graph.on('node:mouseleave', () => {
  const container = document.getElementById('containerChart');
  const ports = container.querySelectorAll('.x6-port-body');
  showPorts(ports, false);
});

graph.on('selection:changed', (args) => {
  args.added.forEach((cell) => {
    selectCell = cell;
    if (cell.isEdge()) {
      cell.isEdge() && cell.attr('line/strokeDasharray', 5); //虚线蚂蚁线
      cell.addTools([
        {
          name: 'vertices',
          args: {
            padding: 4,
            attrs: {
              strokeWidth: 0.1,
              stroke: '#2d8cf0',
              fill: '#ffffff',
            },
          },
        },
      ]);
    }
  });
  args.removed.forEach((cell) => {
    cell.isEdge() && cell.attr('line/strokeDasharray', 0); //正常线
    cell.removeTools();
  });
});`)
const info = ref(`// cellData 初始化数据
graph.fromJSON(cellData.value);
`)
const submit = ref(`JSON.stringify(this.cellData)`)

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);
const getTitle = () => {
  postArticleDetail({
    route: 'AntvX6',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
